<!-- 付款明细 -->
<template>
  <div class="table-page-search-wrapper">
    <!-- 条件查询 start -->
    <a-form layout="inline">
      <a-row :gutter="60">
        <a-col :md="8" :sm="24">
          <a-form-item label="选择时间">
            <a-range-picker
              format="YYYY-MM-DD"
              :show-time="false"
              v-decorator="['range-time-picker']"
              v-model="dateArr"
              :allowClear="true"
              @change="event_changeCreateTime"
              style="width: 100%"
            ></a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="付款类型">
            <a-select v-model="queryParam.status" placeholder="请选择" default-value="" allowClear>
              <a-select-option v-for="item in $const.SUBJECTANDREESA" :key="item.value" :value="item.value">{{
                item.desc
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="当前状态">
            <a-select v-model="queryParam.status" placeholder="请选择" default-value="" allowClear>
              <a-select-option v-for="item in $const.PAYMENT_STATUS" :key="item.value" :value="item.value">{{
                item.desc
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button @click="resetQueryParam" :style="{ margin: '0 8px' }">重置</a-button>
            <a-button icon="export" @click="clickExport" v-if="$auth('PROJECT.PROJECT_PAY_EXPORT')">导出</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <!-- 条件查询 end -->
    <!-- 付款明细列表 -->
    <s-table ref="table" size="default" :row-key="record => record.id" :data="loadData">
      <a-table-column title="申请单号" key="applyNo" data-index="applyNo" />
      <a-table-column title="付款类型" key="type" data-index="type">
        <template slot-scope="text">
          {{ text }}
        </template>
      </a-table-column>
      <a-table-column title="申请者ID" key="createrNo" data-index="createrNo" />
      <a-table-column title="收款者ID" key="bankNo" data-index="bankNo" />
      <a-table-column title="申请金额" key="totalAmount" data-index="totalAmount" >
        <template slot-scope="text, record">
          {{ record.totalAmount | formatAmount }}
        </template>
      </a-table-column>
      <a-table-column title="申请时间" key="createTime" data-index="createTime">
        <template slot-scope="text, record">
          {{ record.createTime | moment() }}
        </template>
      </a-table-column>
      <a-table-column key="now" title="当前状态" data-index="now" />
      <a-table-column title="付款单号" key="payNo" data-index="payNo" />
      <a-table-column title="操作">
        <template slot-scope="record">
          <a @click="clickViewDetail(record)" v-if="$auth('PROJECT.PROJECT_PAY_DETAIL')">查看</a>
        </template>
      </a-table-column>
    </s-table>
    <div>
      <a-row :gutter="48">
        <a-col :md="4" :sm="24">
          <a-statistic title="已付金额" :precision="2" :value="amountInfo.listPaid" style="margin: 0 20px 20px 0" />
        </a-col>
        <a-col :md="4" :sm="24">
          <a-statistic title="待付金额" :precision="2" :value="amountInfo.listTopay" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { getPaymentList } from '@/api/project/finance'
import { buildPaginationObj } from '@/components/Table'
export default {
  props: {
    datailId: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      listType: [
        { status: 1, text: '待审核' },
        { status: 2, text: '待付款' },
        { status: 3, text: '待完税' },
        { status: 4, text: '完成' },
        { status: 5, text: '驳回申请' }
      ],
      amountInfo: {},
      dynamicTitle: '确定要导出吗？',
      queryParam: {},
      dateArr: [],
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_PAY_LIST') && this.queryParam.proId) {
          return getPaymentList(Object.assign(parameter, this.queryParam))
            .then(res => {
              this.amountInfo = res
              this.$emit('billChange', res)
              console.log(res, '获取的合同模板列表信息')
              return res.page
            })
            .catch(() => {})
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      }
    }
  },
  mounted () {
    console.log('666', this.datailId)
  },
  created () {
    // this.queryParam.proId = this.$route.query.proId
    this.queryParam.proId = this.datailId
  },
  methods: {
    // 导出
    clickExport () {
      const parseParams = (url, params) => {
        const paramsArray = []
        Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
        if (url.search(/\?/) === -1) {
          url += `?${paramsArray.join('&')}`
        } else {
          url += `&${paramsArray.join('&')}`
        }
        return url
      }
      const baseUrl = '/api'
      const api = '/boss/finance/recordExport'
      const fullUrl = baseUrl + api
      console.log(fullUrl)
      const dealUrl = parseParams(fullUrl, this.queryParam)
      console.log(this.queryParam)
      window.open(dealUrl, '_self')
    },
    // 时间选择回调
    event_changeCreateTime (value, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    // 点击重置按钮清空查询
    resetQueryParam () {
      this.dateArr = []
      this.queryParam = { proId: this.datailId }
      this.$refs.table.refresh(true)
    },
    // 点击查看进入详情页
    clickViewDetail (record) {
      this.$router.push({ name: 'PaymentDetail', query: { ...record } })
      console.log('点击查看详情')
    }
  }
}
</script>

<style scoped></style>
